<template>
  <div>
    <top-caption :caption="status"></top-caption>
    <div class="comments">
      <template v-for="comment in info.comments">
      <div class="comment">
        <el-rate
                  v-model="comment.rating"
                  disabled
                  :showText="true"
                  text-color="#666"
                  :text-template="comment.created_at">
          </el-rate>
        <p>{{comment.content}}</p>
        <div class="author">
          <span class="photo autoImage">
            <img :src="comment.author.photo">
          </span>
          <span class="mg">{{comment.author.name}}</span>
          <span class="right">{{comment.approval}}赞成</span>
        </div>
      </div>
    </template>
    </div>
  </div>
</template>

<script>
    import {getSmallComment} from 'src/api/index'
    import caption from './caption.vue'
    export default {
        components:{ 'top-caption': caption },
        data:function () {
            return {
                status: '',
                info: {
                    title: '',
                    comments: []
                }
            }
        },
        props:{
            id:{
                type: String,
                required: true
            }
        },
        created: function () {
            let vm = this;
            vm.status = '正在加载...'
            getSmallComment(this.id)
                .then(function (info) {
                    console.log(info)
                    vm.info = info
                    vm.status = info.title
                })
                .catch(function(error){
                    console.log('%c' + error, 'color:red')
                    vm.status = '加载失败'
                })
        },
        methods: {
        }
    }
</script>

<style lang="scss" scoped>
  .comments {
    padding: 0 15px;
    background-color: #E5E9F2;

    .comment {
      padding: 20px 0 10px;
      border-bottom: 1px solid #d6d3d3;

      p{
        margin: 10px 0;
        font-size: 14px;
      }

      .author{
        font-size: 0;

        .photo{
          display: inline-block;
          width: 48px;
          height: 48px;
          border-radius: 24px;
        }

        span{
          display: inline-block;
          line-height: 48px;
          font-size: 12px;
          color:#999;
          overflow: hidden;

          /*background-color: #00c680;*/
        }

        .mg{
          margin-left: 10px;
        }
        .right{
          float: right;
        }
      }
    }
  }
</style>